<template>
<div class="top-tool">
    <a-button type="dashed" @click="toOperation('addCat',0)" shaped="circle">
        <template #icon>
            <PlusOutlined />
        </template>
        

    </a-button>
</div>
<div class="table-box">
    <a-table :pagination="pagination" :key="ckey" defaultExpandAllRows rowKey="catid" :dataSource="dataList" :columns="columns">
        <template #sorts="{record}">
              {{record.type==1?'栏目':'单页'}}
        </template>

        <template #listorder="{record}">
            <a-input size="small" v-model:value="record.listorder" :catid="record.catid" @blur="updateOrder" style="width:70px; text-align:center" />
        </template>
        
        <template #action="{record}">
            <a-button type="primary" size="small" @click="toOperation('editCat',record['catid'])" shape="circle">
                <template #icon>
                    <FormOutlined />
                </template>
            </a-button>

            <a-button type="default" size="small"  class="left" @click="toOperation('addCat',record['catid'])" shape="circle">
                <template #icon>
                    <PlusOutlined />
                </template>
            </a-button>

            <a-button danger  size="small" @click="delCats(record['catid'])" class="left" shape="circle">
                <template #icon>
                    <DeleteOutlined />
                </template>
            </a-button>

        </template>
    </a-table>
    <a-drawer :title="siteStatus['title']" v-model:visible="visibleBox" width="750">
        <router-view @resetData="getDataList" v-if="visibleBox"></router-view>
    </a-drawer>
</div>
</template>
<style lang="less" scoped>
.top-tool{
    margin-bottom:12px; text-align: right;
}
.table-box{
    .left{
        margin-left: 12px;
    }
}
</style>
<script>
import { defineComponent, reactive,ref } from 'vue';
import {PlusOutlined,FormOutlined,DeleteOutlined} from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import { catList,catDel,catOrder } from '@/api/content';
import { message } from 'ant-design-vue';

export default defineComponent({
    components:{PlusOutlined,FormOutlined,DeleteOutlined},
    setup() {
        const siteStatus=reactive({title:''})
        const dataList=reactive([]);
        const columns=[
            {
                title:'名称',
                dataIndex:'catname',
                key:'catname',
                slots:{},
                align:'center',
            },
            {
                title:'排序',
                dataIndex:'listorder',
                key:'listorder',
                slots:{customRender:'listorder'},
                align:'center',
            },
            {
                title:'id',
                dataIndex:'catid',
                key:'catid',
                slots:{},
                align:'center',
            },            
            {
                title:'类型',
                dataIndex:'type',
                key:'type',
                slots:{customRender:'sorts'},
                align:'center',
            },
            {
                title:'统计',
                dataIndex:'total',
                key:'total',
                slots:{},
                align:'center',
            },
            {
                title:'操作',
                dataIndex:'action',
                key:'action',
                slots:{customRender:'action'},
                align:'center',
            },
        ];

        const pagination=reactive({
            total:1,
            page:1,
            defaultPageSize:15,
            onChange:(current,size) =>{
                pagination.page=current;
                getDataList();
            },
            showSizeChange:(current,size)=>{
                pagination.page=current;
                pagination.defaultPageSize=size;
                getDataList();
            }
        });

        const ckey=ref(1);

        const getDataList= () =>{
            visibleBox.value=false;
            catList({page:pagination.page,pageSize:pagination.defaultPageSize}).then(
                res=>{
                    if(res.data['code']==200)
                    {                        
                        pagination.total=res.data['data']['total'];
                        dataList.length=0;
                        Object.assign(dataList,res.data['data']['dataList']);
                        ckey.value=Math.random();
                    }
                    else{
                        message.error(res.data['msg']);
                    }
                },
                err=>{
                    console.log(err);
                }
            )
        };

        const router=useRouter();
        
        const visibleBox=ref(false);

        const updateOrder= (e) =>{           
            let obj={catid:e.target.attributes.catid.value,listorder:e.target.value};
            
            catOrder(obj).then(
                res=>{
                    if(res.data['code']!=200)
                    {
                        message.error(res.data['msg']);
                    }
                },
                err=>{
                    message.error(err.response.status+'错误');
                }
            )
        };


        const toOperation=(name,catid)=>{
            let params={catid:catid,rd:Math.random()};
            if(name=='editCat'){
                siteStatus.title='栏目修改';
            }
            else{
                siteStatus.title='添加栏目';
            }

            visibleBox.value=true;
            router.push({name:name,params:params});
        };

        const delCats= (catid)=>{
            catDel({catid:catid}).then(
                res=>{
                    getDataList();
                },
                err=>{
                    console.log(err);
                }
            )
        };

        getDataList();

        return{
            delCats,toOperation,pagination,columns,dataList,getDataList,visibleBox,siteStatus,ckey,updateOrder
        };
    },
})
</script>
